<script setup lang="ts">
// v2
// :属性名.sync= '属性值'
// v3
// v-model:属性名= '属性值'

import { ref } from 'vue';

const dialogVisible = ref(false)

</script>

<template>
  <div class="box">
    <!-- 按钮 -->
    <XtxButton type="primary" @click="dialogVisible = true">点击打开dialog</XtxButton>
    <!-- 对话框 position: fixed-->
    <!-- 传送门 -->
    <Teleport to="body">
      <XtxDialog title="修改收货地址" v-model:visible="dialogVisible">
        <span>这是一段信息</span>
        <template #footer>
          <XtxButton type="gray" style="margin-right: 20px" @click="dialogVisible = false">取消</XtxButton>
          <XtxButton type="primary" @click="dialogVisible = false">确认</XtxButton>
        </template>
      </XtxDialog>
    </Teleport>
  </div>
</template>

<style scoped lang="less">
// position: fixed 坑点
// 相对于窗口定位
// 有一种情况 -> 
// 相对于祖先元素
// 什么情况下 - > 相对于祖先?
// 如果你的祖先元素身上具有transform的属性 
// 结果:
// position: fixed所相对于的 -> 由窗口 变成 祖先元素
.box {
  transform: translateX(1px);
}
</style>